<template>
  <div>
      detail
      <p>{{detail.name}}</p>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core'
import {useRouter} from 'vue-router'
import axios from 'axios'
export default {
    // mounted(){
    //     console.log(this.$route.query)
    // }
    setup(){
        const state = reactive({
            detail:{}
        })
        const router = useRouter();
        onMounted(()=>{
            var {id} = router.currentRoute.value.query
            axios.get(`http://122.112.161.135:3000/top/playlist/detail?id=${id}`).then(res=>{
                console.log(res.data.playlists)
                state.detail = res.data.playlists
            })
        })
        const refsState = toRefs(state);
        return{
            ...refsState
        }
    }
}
</script>

<style>

</style>